<template>
	<view class="home">
		<view class="info">
			<view>
				<view class="left_max">收件人</view>
				<input type="text" :name="message.name" class="left_input" v-model="message.name" maxlength="10" placeholder="请填写收件人" />
			</view>
			<view>
				<view  class="left_max">电话号码</view>
				<input type="number" :name="message.telephone_number" class="left_input" v-model="message.telephone_number"
				 maxlength="11" placeholder="请填写电话号码" />
			</view>
			<view> 
				<view class="left_max">所在地</view>
				<view  class="left_input" @click="change">{{message.address ? message.address : '请选择'}}</view>
			</view>
		</view>

		<u-select v-model="show" mode="mutil-column-auto" :list="list" @confirm="confirm"></u-select>

		<view class="row">
			<view class="nominal">
				设置默认地址
			</view>
			<view class="input switch">
				<switch color="#00c2ff" :checked="isDefault" @change="isDefaultChange" @click="Switch" />
			</view>
		</view>

		<view class="row" @tap="del" v-show="if_add === 1">
			<view class="del">
				删除收货地址
			</view>
		</view>

		<view class="save" @tap="save">
			<view class="btn">
				保存地址
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				message: {},
				show: false,
				list: [{
						label: '汇泽',
						children: [{
								value: {
									x: '113.034698',
									y: '28.250014'
								},
								label: '二栋',
								children: [{
										label: '605'
									},
									{
										label: '606'
									}
								]
							},
							{
								value: {
									x: '113.038821',
									y: '28.249482'
								},
								label: '六栋',
								children: [{
										label: '604'
									},
									{
										label: '605'
									},
									{
										label: '205'
									}
								]
							}
						]
					},
					{
						label: '洪山',
						children: [{
							value: {
								x: '113.038902',
								y: '28.2519'
							},
							label: '十一栋',
							children: [{
									label: '2201'
								},
								{
									label: '2203'
								},
								{
									label: '2509'
								}
							]
						}]
					}
				],
				isDefault: false,
				if_add: 1,
				if_save: 1
			}
		},
		methods: {
			async add_address() {
				const res = await this.$myRequest({
					url: `add_address?message=${JSON.stringify(this.message)}`
				})
				if (res.data.code == 0) {
					uni.showToast({
						title: '新增成功！',
						mask: true,
						duration: 800
					})
					let id = setInterval(() => {
						// uni.navigateTo({
						// 	url: '../../pagesB/common_address/common_address?if_personal=1&number=' + this.message.number
						// })
						// clearInterval(id);
						uni.navigateBack({
							delta:1
						})
						clearInterval(id)
					}, 1000)
				} else {
					uni.showToast({
						title: '新增失败！',
						mask: true,
						duration: 800
					})
				}
			},
			async getAddress_info() {
				const res = await this.$myRequest({
					url: 'getAddress'
				})
				for (let i = 0; i < res.data.message.length; i++) {
					if (res.data.message[i].id == this.id) {
						this.message = res.data.message[i];
						if (this.message.if_default == true) {
							this.isDefault = true;
						}
						break;
					}
				}
			},
			async remove_address() {
				const res = await this.$myRequest({
					url: `remove_address?id=${this.id}&number=${this.message.number}`
				})
				console.log(res);
				if (res.data.code == 0) {
					uni.showToast({
						title: '删除成功哦',
						duration: 800,
						mask: true,
						success: () => {
							this.$emit('remove_address');
							let id = setInterval(() => {
								uni.navigateTo({
									url: '../../pagesB/common_address/common_address?if_personal=1&number=' + this.message.number
								})
								clearInterval(id);
							}, 1000)
						}
					})
				}
			},
			confirm(e) {
				let complete_address = e[0].label + e[1].label + e[2].label;
				this.message.address = complete_address;
				this.message.give_position = e[1].value;
			},
			change() {
				this.show = !this.show;
			},
			isDefaultChange(e) {
				if (e.detail.value == true) {
					this.message.if_default = true;
				} else {
					this.message.if_default = false;
				}
			},
			del() {
				uni.showModal({
					title: '删除提示',
					content: '你将删除这个收货地址',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.remove_address();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			async save() {
				if (this.if_save == 0) {
					let temp = 0;
					for (let i in this.message) {
						++temp;
					}
					if (temp != 6) {
						uni.showToast({
							title: '你还有未填写的信息哦',
							mask: true,
							duration: 800,
							success() {
								return;
							}
						})
					} else {
						this.add_address();
					}
				} else {
					const res = await this.$myRequest({
						url: `revise_address?message=${JSON.stringify(this.message)}`
					})
					if (res.data.code == 0) {
						uni.showToast({
							title: '保存成功哦',
							success: () => {
								this.getAddress_info();
							}
						})
					}
				}
			},
			Switch() {
				this.isDefault = !this.isDefault;
			}
		},
		onLoad(options) {
			if (options.newAdd == 1 && options.number) {
				this.message.address = '点击选择所在地';
				this.message.if_default = false;
				this.message.number = options.number;
				this.if_add = 0;
				this.if_save = 0;
			} else {
				this.id = options.id;
				this.getAddress_info();
			}
		}
	}
</script>

<style lang="scss">
	.home {
		width: 100%;
		font-size: 30rpx;
		box-sizing: border-box;

		.info {
			view {
				display: flex;
				height: 150rpx;
				line-height: 150rpx;
				border-bottom: 1px solid #eee;

				.left_max {
					text-align: right;
					display: flex;
					justify-content: flex-end;
					width: 150rpx;
					padding-right: 20rpx;
				}

				.left_input {
					display: flex;
					flex: 1;
					padding-left: 20rpx;
					height: 150rpx;
					font-size: 28rpx;
				}

			}
		}

		.row {
			width: 700rpx;
			display: flex;
			margin: 0 auto;

			.nominal {
				padding-left: 15rpx;
				width: 30%;
				height: 120rpx;
				line-height: 120rpx;
				font-weight: 200;
				font-size: 30rpx;
				align-items: center;
			}

			.input {
				width: 70%;
				padding: 20rpx 0;
				align-items: center;
				font-size: 30rpx;

				&.switch {
					justify-content: flex-end;
				}

				.textarea {
					margin: 20rpx 0;
					min-height: 120rpx;
				}
			}

			.del {
				width: 100%;
				height: 90rpx;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				color: #999;
				background-color: rgba(0, 0, 0, 0.1);
				border-radius: 12rpx;
				text-align: center;
				line-height: 90rpx;
			}
		}

		.save {
			view {
				display: flex;
			}

			position: fixed;
			bottom: 50rpx;
			width: 750rpx;
			height: 120rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.btn {
				box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.2);
				width: 90%;
				height: 100rpx;
				border-radius: 100rpx;
				background-color: $main-color;
				color: #fff;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				font-weight: 700;
				letter-spacing: 4rpx;

				.icon {
					height: 100rpx;
					color: #fff;
					font-size: 30rpx;
					justify-content: center;
					align-items: center;
				}

			}
		}
	}
</style>
